<template>
  <div
    class="CarouselContainer"
    @mouseenter="stopAutoPlay"
    @mouseleave="startAutoPlay"
  >
    <div
      ref="mySwiper"
      class="swiper-container"
      :id="currentIndex"
    >
      <ul
        class="swiper-wrapper ztt_list_ul"
        v-if="bannerType==='ztt'"
      >
        <li
          v-for="item in dataList"
          :key="item.pkid"
          class="ztt_list_li swiper-slide"
        >
          <div
            class="view"
            :style="'background-image:url('+imgUrl+item.picture"
          ></div>
          <div
            :title="item.apartname"
            class="title"
          >{{item.apartname}}</div>
          <div class="area">总空置面积：{{item.area}}㎡</div>
          <div class="amount">{{item.rental}}元/月/平方米</div>
        </li>
      </ul>

      <div
        class="swiper-wrapper"
        v-if="bannerType==='jrt'"
      >
        <div
          class="top swiper-slide"
          v-for="product,idxPro in bannerData"
          :key="idxPro"
        >
          <div class="top_left">
            <div class="floor1">
              <div>
                <span class="scd_title">{{product.prodname}}</span>
                <span
                  v-for="itemProduct,index in  product.biaoqian"
                  class="scd_icon_btn"
                  :key="index+'p'"
                >{{itemProduct}}</span>
              </div>
            </div>
            <div class="floor2">
              <span>贷款额度</span>
              <span>合作对象</span>
              <span>适用地区</span>
            </div>
            <div class="floor3">
              <span class="money_">{{product.loanamt}}-{{product.loanamtmax}}万元</span>
              <span>XXXXXX</span>
              <span>{{product.loanarea}}</span>
            </div>
          </div>
          <div class="top_right">
            <div class="top_right-floor1">
              <div class="top_right-floor1_left">
                <span>贷款利率</span>
                <span>（年化率）</span>
              </div>
              <div class="top_right-floor1_right">
                {{product.loanrate}}%
              </div>
            </div>
            <div class="top_right-floor2">
              <button class="ckxq">查看详情</button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import Swiper from 'swiper'
import "swiper/css/swiper.css";
import { myMixin } from '@/mixin/index.js'
export default {
  name: 'wiper-banner',
  props: ['dataList', 'currentIndex', 'prevNext', 'viewNum', 'bannerType', 'bannerData'],
  mixins: [myMixin],
  data () {
    return {
      currentSwiper: null,
    }
  },
  watch: {
    //slide数据发生变化时,更新swiper
    dataList: {
      deep: true,
      // eslint-disable-next-line
      handler (nv, ov) {
        // console.log("数据更新了")
        this.updateSwiper()
      }
    },
    bannerData: {
      deep: true,
      // eslint-disable-next-line
      handler (nv, ov) {
        // console.log("数据更新了")
        this.updateSwiper()
      }
    },
    viewNum: {
      handler (nv, ov) {
        // console.log("数据更新了")
        this.updateSwiper()
      }
    }
  },
  mounted () {
    this.initSwiper()
    console.log(this.imgUrl)
  },
  methods: {
    //鼠标移入暂停自动播放
    stopAutoPlay () {
      this.currentSwiper.autoplay.stop()
    },
    //鼠标移出开始自动播放
    startAutoPlay () {
      this.currentSwiper.autoplay.start()
    },
    //初始化swiper
    initSwiper () {
      // eslint-disable-next-line
      let vueComponent = this//获取vue组件实例
      //一个页面有多个swiper实例时，为了不互相影响,绑定容器用不同值或变量绑定
      this.currentSwiper = new Swiper('#' + this.currentIndex, {
        loop: true, // 循环模式选项
        autoHeight: 'true',//开启自适应高度,容器高度由slide高度决定


        on: {
          //此处this为swiper实例
          //切换结束获取slide真实下标
          slideChangeTransitionEnd: function () {
            // console.log(vueComponent.$props.currentIndex + "号swiper实例真实下标", this.realIndex)
          },
          //绑定点击事件,解决loop:true时事件丢失
          // eslint-disable-next-line
          click: function (event) {
            // console.log("你点击了" + vueComponent.$props.currentIndex + "号swiper组件")
          }
        },
        slidesPerView: this.viewNum, //视口展示slide数1


      })

    },
    //销毁swiper
    destroySwiper () {
      try {
        this.currentSwiper.destroy(true, false)
      } catch (e) {
        // console.log("删除轮播")
      }
    },
    //更新swiper
    updateSwiper () {
      this.destroySwiper()
      this.$nextTick(() => {
        this.initSwiper()
      })
    },
  },
  destroyed () {
    this.destroySwiper()
  }
}
</script>
<style scoped>
.CarouselContainer {
  /* background-color: gray; */
}
/*slide样式*/
.my-swiper-slide {
  height: 300px;
  width: inherit;
  background-size: 100% 100% !important;
  background-repeat: no-repeat;
}

.swiper-wrapper {
  background: #f2f3f5;
}
/*swiper容器样式*/
/* .swiper-container {
  width: inherit;
  height: inherit;
} */
/*自定义分页器按钮被点击选中时的样式*/
/* ::v-deep .swiper-pagination-bullet-active {
  background-color: #d5a72f !important;
  width: 20px;
} */
/*自定义分页器按钮常规样式*/
/* ::v-deep .swiper-pagination-bullet {
  background-color: #9624bf;
  opacity: 1;
  width: 20px;
} */
</style>
